<template>
	<view class="p-30">
		<u-form labelWidth="150rpx" labelPosition="top" :model="form" :rules="rules" ref="uForm" errorType="toast">
			<view class="card p-30">
				<u-form-item label="新密码" prop="password" borderBottom>
					<u-input type="password" v-model="form.password" placeholder="请填写新密码" border="none"></u-input>
				</u-form-item>
				<u-form-item label="再次密码" prop="newpassword" borderBottom>
					<u-input type="password" v-model="form.newpassword" placeholder="请填写再次密码" border="none"></u-input>
				</u-form-item>
			</view>
		</u-form>

		<view class="mt-30">
			<u-button @click="submit" type="primary" :loading="loading" text="提交"></u-button>
		</view>
		<u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
	import {
		resetpwd
	} from '@/common/api.js'
	import {
		mapState
	} from "vuex";
	import commonMixin from '@/mixins/common.js';
	export default {
		mixins: [commonMixin],
		data() {
			return {
				loading: false,
				form: {
					newpassword: "",
					password: ""
				},
				rules: {
					password: {
						required: true,
						message: '请填写新密码',
						trigger: ['blur', 'change']
					},
					newpassword: [{
							required: true,
							message: '请输入再次密码',
							trigger: ['change', 'blur'],
						},
						{
							validator: (rule, value, callback) => {
								return value == this.form.password;
							},
							message: '两次密码不正确',
							// 触发器可以同时用blur和change
							trigger: ['change', 'blur'],
						}
					],
				}
			}
		},
		computed: {
			...mapState([]),
		},
		onReady() {
			//如果需要兼容微信小程序，并且校验规则中含有方法等，只能通过setRules方法设置规则。
			this.$refs.uForm.setRules(this.rules)
		},
		onLoad() {},
		methods: {
			submit() {
				let vm = this;
				vm.loading = true;
				this.$refs.uForm.validate().then(res => {
					resetpwd(vm.form).then(res => {
						vm.$refs.uToast.show({
							type: 'success',
							message: res.msg,
							complete() {
								vm.loading = false;
								uni.redirectTo({
									url: '/pages/mine/mine'
								})
							}
						})
					}).catch(err => {
						console.log(err);
						vm.loading = false;
					})

				}).catch(errors => {
					console.log(errors);
					vm.loading = false;
				})
			}
		},
	}
</script>

<style lang="scss" scoped>
</style>